<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>视频素材管理</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <!--<link rel="stylesheet" th:href="@{/css/admin/b-material-img.css">-->
</head>

<body>

<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label"><label>视频名称</label></div>
                                <div class="flex1">
                                    <input type="text" placeholder="请输入视频名称" name="videoName" class="queryVideoName" th:value="${videoName}">
                                </div>
                            </div>
                            <div style="display: none">
                                <input name="pageNum" th:value="${pageNum}">
                                <input name="pageSize" th:value="${pageSize}">
                            </div>
                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group z-ta-r">
                        <button data-title="上传" class="j-btn-control z-btn z-default upload-video">上传视频</button>
                    </div>

                    <table class="z-table">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" class="input j-checkbox-all">
                            </th>
                            <th>视频名称</th>
                            <th>大小（M）</th>
                            <th>上传时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="video: ${videoList}" th:attr="data-id=${video.videoId}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td th:text="${video.videoName}"></td>
                            <td th:text="${video.size}"></td>
                            <td th:text="${video.addTime}"></td>
                            <td class="btn-group">
                                <a shiro:hasPermission="P_B_video_rename" class="rename">重命名</a>
                                <a shiro:hasPermission="P_B_video_delete" class="del">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="app-card-body">
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="popup-default z-popup z-fixed z-df z-flex-cc  z-hide">
            <div class="bg" data-popup-close=""></div>

            <div class="popup-video-add section z-hide">
                <div class="title">上传视频</div>
                <div class="content">
                    <form class="z-form z-align">
                        <div class="form-item row">
                            <div class="label">
                                <label>选择视频</label>
                            </div>
                            <div class="body">
                                <div class="upload upload-file z-mab" data-input-name="files" data-limit="0"
                                     th:attr="data-url=@{/cpVideo/upload}" data-fieldname="files">
                                    <div class="upload-list upload-list-text"></div>
                                    <div class="upload-tips">只能上传视频文件，且不超过50M</div>
                                    <div class="upload-error"></div>
                                    <div class="input-opacity">
                                        <input type="file" class="input" accept="video/*">
                                        <a class="z-btn z-default"><i class="fa fa-upload"></i> 上传</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="z-btn-group">
                        <a class="z-btn z-primary btn-submit">确定</a>
                        <a class="z-btn z-default" data-popup-close="">取消</a>
                    </div>
                </div>
            </div>
            <div class="popup-rename section z-hide">
                <div class="title">重命名</div>
                <div class="content">
                    <form class="z-form z-align">
                        <input type="hidden" name="videoId">
                        <div class="form-item row">
                            <div class="label">
                                <label>新名称</label>
                            </div>
                            <div class="body">
                                <input type="text" name="videoNewName">
                            </div>
                        </div>
                    </form>
                    <div class="z-btn-group">
                        <a class="z-btn z-primary btn-submit">确定</a>
                        <a class="z-btn z-default" data-popup-close="">取消</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/js/admin-upload.js}"></script>
<script type="text/javascript" th:inline="javascript">

    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    //处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var queryVideoName = $(".queryVideoName").val();
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var url = context + "/cpVideo/list?pageNum=" + pageIndex + "&pageSize=" + pageSize;
            if (queryVideoName) {
                url = url + "&videoName=" + queryVideoName;
            }
            window.location.href = url;
        }
    })

    $(function () {

        eventEmit();
    })

    function eventEmit() {
        //上传图片按钮
        $('.upload-video').click(function () {

            popup.open(".popup-video-add")
        })

        $('.z-table').on('click', '.rename', function () {

            $('.popup-rename').formLoad({
                videoId: $(this).parents('tr').eq(0).data('id'),
            })
            popup.open(".popup-rename")
        }).on('click', '.del', function () {
            var data = $(this).parents('tr')[0].dataset;
            var id = data["id"];
            console.log("videoId_id", id);
            if (confirm('确认删除？')) {
                //删除视频
                $.ajax({
                    type: "POST",
                    url: context + "/cpVideo/delete",
                    data: {
                        videoId: id
                    },
                    success: function (obj) {
                        var code = obj.code;
                        if (code == 0) {
                            popup.tipsTop('删除视频成功', 'success');
                            setTimeout(function (args) {
                                //跳转到视频列表
                                window.location.href = context + "/cpVideo/list";
                            }, 500);
                        }else{
                            popup.tipsTop(obj.msg, "warning")
                        }
                    }
                })
            }
        })

        //上传视频
        $(".popup-video-add form").form({
            submitSelector: ".popup-video-add .btn-submit",
            msg: function (msg) {
                popup.tipsTop(msg, 'warning');
            },
            submit: function () {
                window.location.href = context + "/cpVideo/list";
            }
        })

        //重命名
        $(".popup-rename form").form({
            submitSelector: ".popup-rename .btn-submit",
            msg: function (msg) {
                popup.tipsTop(msg, 'warning');
            },
            submit: function () {
                var data = {};

                $.each($(".popup-rename form").serializeArray(), function (index, field) {
                    if (data[field.name]) {
                        data[field.name] += "," + field.value;
                    } else {
                        data[field.name] = field.value;
                    }
                })

                //重命名
                App.ajax({
                    type: "POST",
                    url: context + "/cpVideo/rename",
                    data: data,
                    loading: true,
                    success: function (obj) {
                        var code = obj.code;
                        if (code == 0) {
                            popup.tipsTop('重命名成功', 'success');
                            setTimeout(function (args) {
                                //跳转到视频列表表
                                window.location.href = context + "/cpVideo/list";
                            }, 500);
                        }else{
                            popup.tipsTop(obj.msg, "warning")
                        }
                    }
                })
            }
        })


    }


    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".z-page a").each(function () {
        $(this).attr("th:href", $(this).attr("th:href") + location.search)
    });

</script>
</body>

</html>